<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<!-- <script src="../stop.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			body {
				background-color: #eae8eb;
				font-size: #333;
			}

			.box {
				width: 1000px;
				margin: 40px auto;
				background-color: #fff;
				border-radius: 20px;
			}

			.box .head {
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #000;
			}

			.box .head h1 {
				font-size: 20px;
			}

			.box .head button {
				padding: 5px 10px;
				border: 1px solid #ccc;
				background-color: #fff;
				font-size: 12px;
				margin-left: 10px;
			}

			.content {
				padding: 20px;
			}

			.content .c-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				padding: 20px;
			}

			.content .c-head input {
				margin-right: 10px;
			}

			.content .main .item {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				background-color: #eee;
				margin-bottom: 20px;
				padding: 20px;
				border-radius: 10px;
				text-align: center;
			}

			.content .check {
				width: 80px;
			}

			.content .msg {
				width: 300px;
				display: flex;
			}

			.content .msg p {
				text-align: left;
				padding-left: 10px;
				font-size: 12px;
			}

			.content .price {
				width: 80px;
			}

			.content .num {
				width: 200px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.content .num button {
				width: 20px;
				height: 20px;
			}

			.content .num input {
				width: 60px;
				height: 20px;
				box-sizing: border-box;
				text-align: center;
			}

			.content .sum {
				width: 80px;
			}

			.content .operate {
				width: 80px;
			}

			.content .operate a {
				color: #000;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="box" id="app">
			<div class="head">
				<h1>购物车</h1>
				<p>已选商品{{allCount}}件 (不含运费):{{allPrice|toTwo}}<button>结算</button></p>
			</div>
			<div class="content">
				<div class="c-head">
					<div class="check">
						<label><input type="checkbox" v-model='allChecked'>全选</label>
					</div>
					<div class="msg">
						商品信息
					</div>
					<div class="price">
						单价
					</div>
					<div class="num">
						数量
					</div>
					<div class="sum">
						金额
					</div>
					<div class="operate">
						操作
					</div>
				</div>
				<div class="main">
					<div class="item" v-for="item in list" :key="item.id">
						<div class="check">
							<input type="checkbox" v-model="item.isChecked">
						</div>
						<div class="msg">
							<img :src="item.img" alt="" width="80">
							<p>{{item.name}}</p>
						</div>
						<div class="price">
							{{item.price|toTwo}}
						</div>
						<div class="num">
							<button @click='item.num===1||item.num--'>-</button>
							<input type="text" v-model="item.num">
							<button @click='item.num++'>+</button>
						</div>
						<div class="sum">
							{{item.num*item.price|toTwo}}
						</div>
						<div class="operate">
							<a href="javascript:;" @click='onDelete(item.id)'>删除</a>
						</div>
					</div>
				</div>
			</div>
		</div>



		<script>
			let data = 
			new Vue({
				el: '#app',
				data: {
					list: data,
				},
				methods: {
					onDelete(id){
						this.list = this.list.filter(item=>item.id!==id)
					}
				},
				filters: {
					toTwo(value) {
						return  '￥' + value.toFixed(2);
					}
				},
				computed: {
					allChecked: {
						get() {
							return this.list.every(item => item.isChecked)
						},
						set(val) {
							console.log(val);
							 this.list =  this.list.map(item=>{
								 item.isChecked = val
								 return item
							 })
						}
					},
					allCount(){
						return this.list.reduce((total,item)=>{
							if(item.isChecked){
								return total + item.num
							}else{
								return total
							}
						},0)
					},
					allPrice(){
						return this.list.reduce((total,item)=>{
							if(item.isChecked){
								return total + item.num*item.price
							}else{
								return total
							}
						},0)
					}
				},
			})
		</script>
	</body>
</html>